<template>
  <var-swipe class="swipe-example" :autoplay="2000">
    <var-swipe-item>
      <img class="swipe-example-image w-[100vw]" src="../../../assets/images/home_banner_01.png" />
    </var-swipe-item>
    <var-swipe-item>
      <img class="swipe-example-image w-[100vw]" src="../../../assets/images/home_banner_02.png" />
    </var-swipe-item>
  </var-swipe>
  <ul class="w-full bg-white flex justify-around py-[14px] shadow mt-[13px]">
    <li class="flex flex-col items-center enter-x" @click="router.push({ name: 'errorTopic' })">
      <div class="rounded-full bg-[#f47272] p-[12px]">
        <img src="../../../assets/icon/exam_error.png" class="w-[23.5px] h-[23.5px]" />
      </div>
      <p class="text-[14px] mt-[10px] text-[#545454]"> 错题重温 </p>
    </li>
    <li class="flex flex-col items-center enter-x" @click="router.push({ name: 'examnotice' })">
      <div class="rounded-full bg-[#23d8a5] p-[12px]">
        <img src="../../../assets/icon/exam_notice.png" class="w-[23.5px] h-[23.5px]" />
      </div>
      <p class="text-[14px] mt-[10px] text-[#545454]"> 考试通知 </p>
    </li>
    <li class="flex flex-col items-center enter-x" @click="toResultList">
      <div class="rounded-full bg-[#23d8a5] p-[9.75px] bg-[#F8B84A]">
        <img src="../../../assets/icon/exam_list.png" class="w-[28px] h-[28px]" />
      </div>
      <p class="text-[14px] mt-[10px] text-[#545454]"> 考试排行 </p>
    </li>
  </ul>
</template>

<script setup lang="ts">
  const router = useRouter();
  const toResultList = () => {
    router.push({ name: 'examresult' });
  };
</script>
